<template>
	<div>
		<mj-title type="h2" title="Upload 上传"></mj-title>
		<div class="page-desc">通过点击或者拖拽上传文件</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-upload 
					v-model="files" 
					:action="url" 
					:multiple="false"
					:format="['png','jpg']"
					:maxSize="1024"
					:before-upload="handleBeforeUpload"
					@change="handleChange"
					@success="_success" 
					@error="_error"
					:auto="false">
				<mj-button hollow icon="cloud-upload">上传图片</mj-button></mj-upload>
				<ul class="page-list">
					<li>上传之后，通过监听 v-model 的 files 值，返回数组。数组包含信息：img、进度、文件名、文件大小、验证结果、响应状态</li>
				</ul>
				<div v-for="(item,index) in files" :key="index">
					<div><img :src="item.src" width="120" height="90"/></div>
					<p>进度：{{item.loaded}}</p>
					<p>文件名：{{item.name}}</p>
					<p>文件大小：{{item.size}}</p>
					<p>验证结果：{{item.verify}}</p>
					<p>响应状态：{{item.status}}</p>
				</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-upload 
						v-model="files" 
						:action="url" 
						@success="_success" 
						:multiple="true" 
						:maxSize="1024" 
						@error="_error">&lt;mj-button hollow icon="cloud-upload">上传图片&lt;/mj-button>&lt;/mj-upload>
						&lt;ul class="page-list">
							&lt;li>上传之后，通过监听 v-model 的 files 值，返回数组。数组包含信息：img、进度、文件名、文件大小、验证结果、响应状态&lt;/li>
						&lt;/ul>
						&lt;div v-for="(item,index) in files">
							&lt;div>&lt;img :src="item.src" width="120" height="90"/>&lt;/div>
							&lt;p>进度：{item.loaded}&lt;/p>
							&lt;p>文件名：{item.name}&lt;/p>
							&lt;p>文件大小：{item.size}&lt;/p>
							&lt;p>验证结果：{item.verify}&lt;/p>
							&lt;p>响应状态：{item.status}&lt;/p>
						&lt;/div>
					&lt;/template>

					&lt;script>
					export default {
					  data () {
					    return {
					      files: [],
					      url: 'http://localhost:8080/#/upload/upload.php'
					    }
					  },
					  components: {},
					  watch: {
					    files (v) {
					      console.log(v)
					      console.log('files is change')
					    }
					  },
					  methods: {
					    _success (data, index) {
					      // index 表示file中的第几个
					      console.log(data)
					    },
					    _error (data, index) {
					      console.log('_error')
					      console.log(data)
					    }
					  }
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="示例1"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-upload 
				v-model="files4" 
				:action="url" 
				@success="_success" 
				:multiple="true" 
				:maxSize="10" 
				@error="_error"><mj-button hollow icon="cloud-upload">上传图片</mj-button></mj-upload>
				<ul class="page-list" style="margin-bottom:0">
					<li>自定义已上传的文件列表展示，示例显示文件名称，点击删除自定义事件与服务器交互</li>
				</ul>
				<ul class="upload-list-1">
					<li v-for="(item,index) in files4">
						<Icon type="note" />{{item.name}}<a href="javascript:void(0)" @click="delFiles4(index)" class="ml20">删除</a>
					</li>
				</ul>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-upload 
						v-model="files4" 
						:action="url" 
						@success="_success" 
						:multiple="true" 
						:maxSize="10" 
						@error="_error">&lt;mj-button hollow icon="cloud-upload">上传图片&lt;/mj-button>&lt;/mj-upload>
						&lt;ul class="page-list" style="margin-bottom:0">
							&lt;li>自定义已上传的文件列表展示，示例显示文件名称，点击删除自定义事件与服务器交互&lt;/li>
						&lt;/ul>
						&lt;ul class="upload-list-1">
							&lt;li v-for="(item,index) in files4">
								&lt;Icon type="note" />{item.name}&lt;a href="javascript:void(0)" @click="delFiles4(index)" class="ml20">删除&lt;/a>
							&lt;/li>
						&lt;/ul>
					&lt;/template>
					&lt;script>
					export default {
						data() {
							return {
								url: 'http://localhost:8080/#/upload/upload.php',
								files4: [],
							}
						},
						methods: {
							_success (data, index) {
								// index 表示file中的第几个
								console.log(data)
							},
							_error (data, index) {
								console.log('_error')
								console.log(data)
							},
						}
					}
					&lt;/script>
					&lt;style>
					/*上传文件列表样式1*/
					.upload-list-1 {padding:10px 0;}
					.upload-list-1 li:hover {background: #f5f5f5;}
					&lt;/style>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="示例2"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div class="demo-list">
					<div class="item" v-for="(item,index) in files5">
						<img :src="item.src"/>
						<a href="javascript:void(0)" @click="delFiles5(index)"><Icon type="delete" /></a>
					</div>
				</div>
				<mj-upload 
					class="upload-card-list"
					v-model="files5" 
					:action="url" 
					@success="_success5" 
					:multiple="true" 
					:auto="false"
					@error="_error">
					<Icon type="add" />
				</mj-upload>
				<ul class="page-list">
					<li>卡片式展示已上传图片</li>
				</ul>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;div class="demo-list">
							&lt;div class="item" v-for="(item,index) in files5">
								&lt;img :src="item.src"/>
								&lt;a href="javascript:void(0)" @click="delFiles5(index)">&lt;Icon type="delete" />&lt;/a>
							&lt;/div>
						&lt;/div>
						&lt;mj-upload 
							class="upload-card-list"
							v-model="files5" 
							:action="url" 
							@success="_success" 
							:multiple="true" 
							@error="_error">
							&lt;Icon type="add" />
						&lt;/mj-upload>
						&lt;ul class="page-list">
							&lt;li>卡片式展示已上传图片&lt;/li>
						&lt;/ul>
					&lt;/template>
					&lt;script>
					export default {
						data() {
							return {
								url: 'http://localhost:8080/#/upload/upload.php',
								files5: [],
							}
						},
						methods: {
							delFiles5(index) {
								this.files5.splice(index,1)
							},
						}
					}
					&lt;/script>
					&lt;style>
					/*卡片式*/
					.demo-list {display: inline-block;vertical-align: top;}
					.demo-list .item {position: relative;}
					.demo-list .item + .item {margin-left: 10px;}
					.demo-list .item:last-child {margin-right: 8px;}
					.demo-list .item img {width:100%;height:100%;}
					.demo-list .item a {position: absolute;top: 0;left: 0;color: #fff;display: block;line-height: normal;z-index: 2;opacity: 0;width: 100%;height: 100%;transition:all .3s ease;}
					.demo-list .item a i {font-size:26px;display:inline-block;margin-top: 34px;}
					.demo-list .item:after {content:"";position: absolute;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,.5);transition:all .3s ease;opacity: 0;}
					.demo-list .item:hover:after {opacity: 1;}
					.demo-list .item:hover a {opacity: 1;}
					.upload-card-list {display: inline-block;margin-left: 8px;}
					.upload-card-list /deep/ .upload-file,.demo-list .item {
						background-color: #fbfdff;
					    border: 1px dashed #c0ccda;
					    border-radius: 6px;
					    box-sizing: border-box;
					    width: 100px;
					    height: 100px;
					    cursor: pointer;
					    line-height: 100px;
					    vertical-align: top;
					    text-align: center;
					    padding:0;
					    overflow:hidden;
					    display: inline-block;
					    transition:border .3s ease;
					}

					.upload-card-list /deep/ .upload-file i {
						font-size:36px;
						color:#c8c8c8;
						padding:0;
					}
					.upload-card-list /deep/ .upload-file:hover,.demo-list .item:hover {
						border-color:var(--primary);
					}
					&lt;/style>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="点击按钮上传"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-upload 
				v-model="files2" 
				:action="url" 
				:multiple="true"
				:auto="false"
				@success="_success2"
				@error="_error"
				ref="uploadFiles">
				<mj-button hollow icon="cloud-upload">选择文件</mj-button></mj-upload>
				<mj-button type="primary" style="margin-left: 10px" @click="upload">确认上传</mj-button>
				<ul>
					<li v-for="file in files2">
						<Icon type="image" />{{file.name}}<a href="javascript:void(0)" @click="deleteImg(file)"><Icon type="delete" /></a>
					</li>
				</ul>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;p>{files2}&lt;/p>
						&lt;mj-upload 
						v-model="files2" 
						:action="url" 
						:multiple="true"
						:auto="false"
						ref="uploadFiles">&lt;mj-button hollow icon="cloud-upload">选择文件&lt;/mj-button>&lt;/mj-upload>
						&lt;mj-button type="primary" style="margin-left: 10px" @click="upload">确认上传&lt;/mj-button>
					&lt;/template>

					&lt;script>
					export default {
					  data () {
					    return {
					      files2: [],
					      url: 'http://192.168.0.126:8099/vueTest/upload.php'
					    }
					  },
					  components: {},
					  methods: {
					    upload () {
					      this.$refs.uploadFiles.upload()
					    }
					  }
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="拖拽上传"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<p>{{files3}}</p>
				<mj-upload 
					v-model="files3" 
					:action="url"
					:auto="false"
					:drag="true"
					@success="_success3">
					<Icon type="cloud-upload" />
					<div>将文件拖到此处，或点击上传</div>
				</mj-upload>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;p>{files3}&lt;/p>
						&lt;mj-upload 
							v-model="files3" 
							:action="url"
							:drag="true">
							&lt;Icon type="cloud-upload" />
							&lt;div>将文件拖到此处，或点击上传&lt;/div>
						&lt;/mj-upload>
					&lt;/template>

					&lt;script>
					export default {
					  data () {
					    return {
					      files3: [],
					      url: 'http://192.168.0.126:8099/vueTest/upload.php'
					    }
					  },
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="图片裁切上传"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
			    <mj-img-crop
			      v-model="imgCrop"
			      :action="url"
			      @success="_success"
			      @error="_error">确认</mj-img-crop>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-img-crop
						v-model="imgCrop"
						:action="url"
						@success="_success"
						@error="_error">确认&lt;/mj-img-crop>
					&lt;/template>

					&lt;script>
					export default {
					  data () {
					    return {
					      imgCrop: [],
					      url: 'http://localhost:8080/#/upload/upload.php'
					    }
					  },
					  methods: {
					    _success (data) {
					      console.log(data)
					    },
					    _error (data) {
					      console.log('_error')
					      console.log(data)
					    }
					  }
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Steps 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>value</td>
					<td>v-model值，为一个数组，length为上传文件的个数。包含size、loaded(上传进度)、name、src(图片)、type、status(上传状态服务器响应状态，并不代表文件上传成功或失败，0上传中，1成功，-1失败)、verify(验证结果)属于。</td>
					<td>Array</td>
					<td>-</td>
				</tr>
				<tr>
					<td>action</td>
					<td>上传的url地址</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>accept</td>
					<td>h5原生属性，接受上传的文件类型，即打开上传框时默认选择的类型</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>format</td>
					<td>支持的文件类型</td>
					<td>Array</td>
					<td>-</td>
				</tr>
				<tr>
					<td>multiple</td>
					<td>支持多图上传</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>name</td>
					<td>上传文件字段名，默认为file</td>
					<td>String</td>
					<td>file</td>
				</tr>
				<tr>
					<td>headers</td>
					<td>上传请求 header 数据</td>
					<td>Object</td>
					<td>-</td>
				</tr>
				<tr>
					<td>data</td>
					<td>附加请求的参数</td>
					<td>Object</td>
					<td>-</td>
				</tr>
				<tr>
					<td>maxSize</td>
					<td>文件大小限制，单位 kb</td>
					<td>Number</td>
					<td>1024</td>
				</tr>
				<tr>
					<td>timeout</td>
					<td>指定请求超时的毫秒数(0 表示无超时时间)</td>
					<td>Number</td>
					<td>0</td>
				</tr>
				<tr>
					<td>auto</td>
					<td>选择文件后自动上传，无需再点击上传按钮</td>
					<td>Boolean</td>
					<td>true</td>
				</tr>
				<tr>
					<td>drag</td>
					<td>允许拖拽上传</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>boxWidth</td>
					<td>裁切上传显示宽</td>
					<td>Number</td>
					<td>600</td>
				</tr>
				<tr>
					<td>boxHeight</td>
					<td>裁切上传显示高</td>
					<td>Number</td>
					<td>400</td>
				</tr>
				<tr>
					<td>imgWidth</td>
					<td>裁切上传，裁切图片的宽</td>
					<td>Number</td>
					<td>150</td>
				</tr>
				<tr>
					<td>imgHeight</td>
					<td>裁切上传，裁切图片的高</td>
					<td>Number</td>
					<td>100</td>
				</tr>
				<tr>
					<td>fixedScale</td>
					<td>裁切上传，约束比例</td>
					<td>Boolean</td>
					<td>true</td>
				</tr>
			</tbody>
		</table>

        <mj-title type="h6" title="Upload 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                	<td>success</td>
                	<td>上传成功回调，参数(Object,index);Object上传返回的response，index为value中的序号 <code>function(res, index, files)</code></td>
                	<td><code>res、index、files</code></td>
                </tr>
                <tr>
                	<td>error</td>
                	<td>上传失败 <code>function(res, index)</code></td>
                	<td><code>res、index</code></td>
                </tr>
                <tr>
                	<td>change</td>
                	<td>添加上传文件改变事件 <code>function(event)</code></td>
                	<td><code>event</code></td>
                </tr>
                <tr>
                	<td>before-upload</td>
                	<td>上传文件之前的钩子 <code>function(files)</code></td>
                	<td><code>files</code></td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Upload Methods"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>upload</td>
            		<td>手动上传方法，auto为false时</td>
            	</tr>
            	<tr>
            		<td>clear</td>
            		<td>清空事件方法</td>
            	</tr>
            	<tr>
            		<td>cancelRequest</td>
            		<td>取消上传</td>
            	</tr>
            </tbody>
        </table>


	</div>
</template>

<script>

export default {
	data () {
		return {
			files: [],
			url: 'http://localhost:8080/#/upload/upload.php',
			files2: [],
			files3: [],
			files4: [],
			files5: [],
			imgCrop: [],
		}
	},
	methods:{
		_success (data, index, file) {
			// index 表示file中的第几个
			console.log('%c success','background:green',data, file)
			this.files = []
			data.map(d => {
				this.files.push(d)
			})
		},
		_error (data, index, file) {
			console.log('%c_error','color:red',data,index, file)
			if(data.code===2) {
				this.$msg(data.msg,{icon:2})
			}
		},
		upload () {
			this.$refs.uploadFiles.upload()
		},
		delFiles4(index) {
			this.files4.splice(index,1)
		},
		delFiles5(index) {
			this.files5.splice(index,1)
		},
		handleBeforeUpload(file) {
			console.log(file,'before')
			// this.$msg('before-upload，上传文件之前的钩子，返回false，停止上传',{icon:3})
			// return false
		},
		handleChange(file) {
			console.log(file,'change')
		},
		_success2 (data, index) {
			this.files2 = []
			data.map(d => {
				this.files2.push(d)
			})
			console.log('%c success2','background:green',data)
		},
		_success3 (data, index) {
			this.files3 = []
			data.map(d => {
				this.files3.push(d)
			})
			// console.log('%c success','background:green',data)
		},
		_success5 (data, index) {
			this.files5 = []
			data.map(d => {
				this.files5.push(d)
			})
			// console.log('%c success','background:green',data)
		},
		deleteImg(file) {
			console.log(file)
			let fileList = this.$refs.uploadFiles.tempUpload;
			console.log('fileList',fileList)
			fileList.splice(fileList.indexOf(file), 1);
			this.files2.splice(this.files2.indexOf(file), 1);
			console.log('fileList',fileList)
		}
	}
}
</script>

<style scoped>
.page-list {margin-top: 10px;}

/*上传文件列表样式1*/
.upload-list-1 {padding:10px 0;}
.upload-list-1 li:hover {background: #f5f5f5;}

/*卡片式*/
.demo-list {display: inline-block;vertical-align: top;}
.demo-list .item {position: relative;}
.demo-list .item + .item {margin-left: 10px;}
.demo-list .item:last-child {margin-right: 8px;}
.demo-list .item img {width:100%;height:100%;}
.demo-list .item a {position: absolute;top: 0;left: 0;color: #fff;display: block;line-height: normal;z-index: 2;opacity: 0;width: 100%;height: 100%;transition:all .3s ease;}
.demo-list .item a i {font-size:26px;display:inline-block;margin-top: 34px;}
.demo-list .item:after {content:"";position: absolute;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,.5);transition:all .3s ease;opacity: 0;}
.demo-list .item:hover:after {opacity: 1;}
.demo-list .item:hover a {opacity: 1;}
.upload-card-list {display: inline-block;}
.upload-card-list /deep/ .upload-file,.demo-list .item {
	background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    cursor: pointer;
    line-height: 100px;
    vertical-align: top;
    text-align: center;
    padding:0;
    overflow:hidden;
    display: inline-block;
    transition:border .3s ease;
}

.upload-card-list /deep/ .upload-file i {
	font-size:36px;
	color:#c8c8c8;
	padding:0;
}
.upload-card-list /deep/ .upload-file:hover,.demo-list .item:hover {
	border-color:var(--primary);
}
</style>